<template>
    <div id="box">
        <el-header height="300px" class="my-header">
            <el-row :gutter="12">
                <el-col :span="24">
                    <el-card shadow="always" style="height: 80px; width: 800px">
                        {{ enterpriseData.enterpriseName }}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="50" justify="center">
                <el-col :span="8" justify="center">
                    <el-card
                        shadow="always"
                        style="height: 80px; border-radius: 100px"
                    >
                        企业性质:{{ enterpriseData.enterpriseNature }}
                    </el-card>
                </el-col>
                <el-col :span="8" justify="center">
                    <el-card
                        shadow="always"
                        style="height: 80px; border-radius: 100px"
                    >
                        公司规模:{{ enterpriseData.enterpriseScale }}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="24">
                    <el-card shadow="always" style="height: 100px">
                        公司概况:{{ enterpriseData.enterpriseProfile }}
                    </el-card>
                </el-col>
            </el-row>
        </el-header>
        <!--      这里放置筛选的东西-->
        <div class="filter-space">
            <div class="input-container">
                <input
                    v-model="einput"
                    type="text"
                    class="selOccupation"
                    style="width: 500px; height: 50px"
                    placeholder="请输入想要查询的职位"
                />
                <el-button
                    slot="append"
                    type="info"
                    round
                    icon="el-icon-search"
                    style="
                        height: 50px;
                        width: 200px;
                        margin-left: -1px;
                        color: #ffffff;
                    "
                    @click="handleSearch"
                    >搜索</el-button
                >
            </div>
        </div>

        <el-container>
            <!--       这里是企业对应的职位信息-->
            <el-aside class="my-aside">
                <el-card
                    class="box-card"
                    v-for="occupation in processOccupations"
                    :key="occupation.occupationId"
                >
                    <div slot="header" class="clearfix">
                        <el-button
                            style="
                                float: right;
                                padding: 3px 0;
                                width: 150px;
                                height: 30px;
                            "
                            type="info"
                            icon="el-icon-message"
                            @click="sentOccupationId(occupation.occupationId)"
                            >查看</el-button
                        >
                    </div>
                    <div :key="o" class="text item">
                        <div style="font-size: larger; font-weight: bold">
                            {{ occupation.occupationName }}
                        </div>
                        城市: {{ occupation.cityName }}<br />
                        薪水: {{ occupation.occupationSalary }}<br />
                        所需学历: {{ occupation.occupationDegreeLabel }}<br />
                        所需经验: {{ occupation.truncatedOccupationExperience }}
                    </div>
                </el-card>
            </el-aside>
            <!--        这里对应的是职位的详细信息-->
            <el-main class="showMain">
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>


<script>
// import router from "@/router";
// import {query} from "vue/src/platforms/web/util";
let degree = require('@/assets/degree-code.json')
export default {
    data() {
        return {
            enterpriseInput: {
                input: ''
            },
            einput: '',
            enterpriseId: 0,
            occupationId: 0,
            enterpriseData: [],
            OccupationData: [
                {
                    occupationId: '',
                    occupationName: '',
                    occupationCategory: '',
                    occupationCity: '',
                    cityName: '',
                    occupationLocation: '',
                    occupationProfile: '',
                    occupationDegree: '',
                    occupationExperience: '',
                    occupationSalary: '',
                    occupationEnterprise: '',
                    enterpriseName: '',
                    enterpriseNature: '',
                    enterpriseScale: ''
                }
            ],
            occupation: []
            // path:
        }
    },
    computed: {
        processOccupations() {
            return this.OccupationData.map((occupation) => {
                let experienceText
                const experience = Number(occupation.occupationExperience)

                if (experience === 0) {
                    experienceText = '不限'
                } else if (experience === -1) {
                    experienceText = '应届生'
                } else {
                    experienceText = experience + '年经验'
                }

                const degreeItem = degree.find(
                    (item) => item.value === occupation.occupationDegree
                )
                const degreeText = degreeItem ? degreeItem.label : ''

                return {
                    ...occupation,
                    truncatedOccupationName:
                        occupation.occupationName?.length > 15
                            ? occupation.occupationName.substring(0, 15) + '...'
                            : occupation.occupationName,
                    truncatedEnterpriseName:
                        occupation.enterpriseName?.length > 15
                            ? occupation.enterpriseName.substring(0, 15) + '...'
                            : occupation.enterpriseName,
                    truncatedOccupationExperience: experienceText,
                    occupationDegreeLabel: degreeText
                }
            })
        }
    },
    mounted() {
        this.fetchEnterpriseData() // 组件加载时获取企业信息
    },
    methods: {
        handleSearch() {
            this.enterpriseInput.input = this.einput
            this.enterpriseInput.id = this.enterpriseId
            this.$message.success(
                this.enterpriseInput.input + this.enterpriseInput.id
            )
            this.$axios
                .post('/occupation/enterpriseSearch', this.enterpriseInput)
                .then((response) => {
                    this.$message('Data submitted successfully!')
                    this.OccupationData = response.data
                    // this.processOccupations()
                })
                .catch((error) => {
                    this.$message.error('Failed to submit data.')
                    console.log(error)
                })
        },
        async fetchEnterpriseData() {
            try {
                // 获取企业数据
                const enterpriseResponse = await this.$axios.get(
                    '/enterprise/getEnterpriseById?enterpriseId=' +
                        this.enterpriseId
                )
                this.enterpriseData = enterpriseResponse.data
                // 获取企业职位集合信息
                const occupationResponse = await this.$axios.get(
                    '/occupation/getAllOccupationByEnterpriseId?occupationEnterpriseId=' +
                        this.enterpriseData.enterpriseId
                )
                this.OccupationData = occupationResponse.data
            } catch (error) {
                console.error('Error fetching data:', error)
            }
        },
        sentOccupationId: function (id) {
            console.log('点击的职位编号', id)
            if (
                this.$route.path !== '/occupationInfoMg/OccupationManage' ||
                this.$route.query.occupationId !== id.toString()
            ) {
                this.occupationId = id
                this.$router.push({
                    path: '/occupationInfoMg/OccupationManage',
                    query: { occupationId: id }
                })
            }
        }
    },
    created() {
        // 在组件创建时获取传递过来的id值
        this.enterpriseId = this.$route.query.enterpriseId
    },
    watch: {
        '$route.query.occupationId'(newVal) {
            this.occupationId = newVal
        }
    },
    beforeRouteUpdate(to, from, next) {
        this.fetchEnterpriseData()
        next()
    }
}
</script>



<style scoped>
#box {
    width: 80%;
    max-width: 1200px; /* 最大宽度设置 */
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    min-height: 100vh; /* 确保内容区域最小高度为视口高度 */
    font-family: '微软雅黑', Arial, sans-serif; /* 设置字体为微软雅黑 */
}

.my-header {
    background-color: #f5f5f5; /* Header 背景颜色 */
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.filter-space {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid gray;
    border-radius: 5px;
    margin-bottom: 20px; /* 增加下方内容的间距 */
}

.input-container {
    display: flex;
    align-items: center;
}

.el-header,
.el-footer {
    background-color: #a8a8a8; /* Header 和 Footer 背景颜色 */
    color: #333;
    text-align: center;
    line-height: 60px;
    border-radius: 5px;
}

.el-aside {
    background-color: #fff;
    color: #333;
    border-right: 1px solid #ddd; /* 添加右边框 */
    overflow-y: auto; /* 添加滚动条 */
    border-radius: 5px;
}

.el-main {
    background-color: #f9f9f9; /* Main 背景颜色 */
    color: #333;
    padding: 20px; /* 内边距 */
    border-radius: 5px;
}
</style>